<template>
  <div class="wrapper">
    <div class="logo">
      <image mode="aspectFit" src="/static/img/logo-light-green.png"></image>
    </div>
    <i-panel title="用户登陆">
      <i-input :value="username" @change="usernameBind" maxlength="20" type="text" title="用户名" placeholder="请输入用户名" />
      <i-input :value="password" @change="passwordBind" maxlength="20" type="password" title="登陆密码" placeholder="请输入密码" />
    </i-panel>
    <i-button class="login-button" i-class='login-btn' type='theme' @click="login">登陆</i-button>

    <i-message id="message" />
  </div>
</template>

<script>

import store from '../store/store'
import { request } from '@/utils/index'

const { $Message } = require('../../../static/dist/base/index')

export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },

  components: {},

  created () {
    // 调用应用实例的方法获取全局数据
    // this.getUserInfo()
    if (store.state.token) {
      wx.redirectTo({
        url: '../productList/main'
      })
    }
  },

  methods: {
    login () {
      if (this.username === '' || this.password === '') {
        $Message({ content: '请填写完整信息', type: 'warning' })
        return false
      }
      var form = {
        username: this.username,
        password: this.password
      }
      request('/user/login', form, 'POST').then((ids) => {
        if (ids.code !== 200) {
          $Message({ content: ids.message, type: 'error' })
          return false
        }
        $Message({ content: '登陆成功', type: 'success' })
        store.commit('setToken', 'Bearer ' + ids.token)
        setTimeout(function () {
          wx.redirectTo({
            url: '../productList/main'
          })
        }, 700)
      }, (e) => {
        $Message({ content: '请求错误，请重试', type: 'error' })
        return false
      })
    },
    usernameBind (e) {
      this.username = e.mp.detail.detail.value
    },
    passwordBind (e) {
      this.password = e.mp.detail.detail.value
    }
  }
}
</script>

<style scoped>
.logo{
  text-align: center;
}
.logo image{
  display: block;
  margin: 0 auto;
}
.login-button {
  display: block;
  margin-top: 50rpx;
}
.login-btn {
  background: #1EB4C5 !important;
}
</style>
